<template>
  <div class="workbench_home_page">
    <div class="account_msg_box">
      <img :src="userObj.avatar ? baseURL + userObj.avatar : '@/assets/_layout/avatar.png'" alt="" class="img">
      <div class="msg_box">
        <div class="date">{{ nowDate }}</div>
        <div class="name_line">
          早安，
          <span class="name">{{userObj.nickName}}</span>
          ，祝您每天都开开心心工作顺顺利利！
        </div>
        <div class="tags">
          角色：
          <div class="tag blue">{{ userObj.admin ? '管理员' : '运营人员' }}</div>
          <!-- <div class="tag yellow">复核人</div> -->
          <!-- <div class="tag green">查看人</div> -->
        </div>
      </div>
    </div>
    <div class="project_list">
      <div
        class="project_item"
        v-for="item in projectList"
        :key="item.id"
        @click="projectItemClick(item.routePath)"
      >
        <img class="img" :src="item.iconUrl" alt="">
        <div class="name_box">
          <div class="name">{{ item.name }}</div>
          <!-- <div class="sub_name">副标题文字</div> -->
        </div>
      </div>
    </div>
    <div class="mod_table">
      <div class="title">
        <i class="icon"></i>
        待办事项
      </div>
      <el-table :data="todoTableList" empty-text="未有待办事项">
        <el-table-column
          v-for="item in columns"
          :key="item.prop"
          v-bind="item"
        >
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="handlerClick(scope.row)">立即处理</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="mod_table">
      <div class="title">
        <i class="icon"></i>
        正在进行
      </div>
      <el-table :data="doingTableList" empty-text="未有正在进行的业务">
        <el-table-column
          v-for="item in columns"
          :key="item.prop"
          v-bind="item"
        >
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="handlerClick(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { workTodoList, workGoingList } from '@/api/production'
import { mapState } from 'vuex'
import icon1 from '@/assets/production/workbench/icon_1.png'
import icon2 from '@/assets/production/workbench/icon_2.png'
import icon3 from '@/assets/production/workbench/icon_3.png'

export default {
  data() {
    const now = new Date()
    let weekDay = now.getDay()
    switch(weekDay) {
      case 0:
        weekDay = '日'
        break;
      case 1:
        weekDay = '一'
        break;
      case 2:
        weekDay = '二'
        break;
      case 3:
        weekDay = '三'
        break;
      case 4:
        weekDay = '四'
        break;
      case 5:
        weekDay = '五'
        break;
      case 6:
        weekDay = '六'
        break;
      case 7:
        weekDay = '七'
        break;
    }
    return {
      baseURL:
        process.env.NODE_ENV === "development"
          ? process.env.VUE_APP_BASE_API
          : process.env.VUE_APP_HTTP_REQUEST_ADDRESS,
      nowDate: `${now.getFullYear()}年${now.getMonth() + 1}月${now.getDate()}日 星期${weekDay}`,
      projectList: [
        {
          id: 1,
          name: '新增资产',
          routePath: '/productionCenter/addProject',
          iconUrl: icon1
        },
        {
          id: 2,
          name: '申请授信',
          routePath: '/productionCenter/jigouList',
          iconUrl: icon2
        },
        {
          id: 3,
          name: '申请融资',
          routePath: '/productionCenter/jigouList',
          iconUrl: icon3
        },
      ],
      columns: [],
      todoTableList: [],
      doingTableList: [],
    }
  },
  computed: {
    ...mapState({
      userObj: state => state.user.userObj
    })
  },
  created() {
    /* type
    10: 融资列表 20：授信列表 30：账户锁定 40:项目列表 50：确真列表
    融资列表和授信列表的状态为：10:待初审 20:待复审 30:成功 40:失败 50:缴纳服务费 60:分配授信
    其他： 10:待审核 30:通过 40:失败 */
    this.columns = [
      {
        label: '序号',
        type: 'index',
      },
      {
        label: '项目名称',
        prop: 'pname'
      },
      {
        label: '审核阶段',
        prop: 'status', // 审核状态 10:待审核 30:通过 40:失败
        formatter: (row, column, cellValue, index) => {
          if (row.type === '10' || row.type === '20') {
            switch(cellValue) {
              case '10':
                return '待初审'
              case '20':
                return '待复审'
              case '30':
                return '成功'
              case '40':
                return '失败'
              case '50':
                return '缴纳服务费'
              case '60':
                return '分配授信'
            }
          } else {
            switch(cellValue) {
              case '10':
                return '待审核'
              case '30':
                return '通过'
              case '40':
                return '失败'
            }
          }
        }
      },
      {
        label: '创建日期',
        prop: 'createTime'
      },
    ]
  },
  mounted() {
    this.getWorkTodoList()
    this.getWorkGoingList()
  },
  methods: {
    projectItemClick(path) {
      this.$router.push({
        path,
      })
    },
    // 待办列表
    getWorkTodoList() {
      workTodoList().then((res) => {
        this.todoTableList = res.data
      })
    },
    // 正在进行列表
    getWorkGoingList() {
      workGoingList().then((res) => {
        this.doingTableList = res.data
      })
    },
    // 立即处理和查看
    /* type
    10: 融资列表 20：授信列表 30：账户锁定 40:项目列表 50：确真列表
    融资列表和授信列表的状态为：10:待初审 20:待复审 30:成功 40:失败 50:缴纳服务费 60:分配授信
    其他： 10:待审核 30:通过 40:失败 */
    handlerClick({ type, status, id }) {
      let path
      switch(type) {
        case '10':
          path = '/productionCenter/financingDetail'
          break;
        case '20':
          path = '/productionCenter/creditDetail'
          break;
        case '30':
          path = '/productionCenter/lockCreditDetail'
          break;
        case '40':
          path = '/productionCenter/projectDetail'
          break;
        case '50':
          path = '/productionCenter/financingAuthenticDetail'
          break;
      }
      this.$router.push({
        path,
        query: {
          id,
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
@import '@/assets/styles/px2rem.scss';
@import '@/assets/styles/variables.scss';

.mod {
  background-color: #fff;
  box-shadow: 0 px2rem(1) px2rem(2) 0 rgba(1, 24, 70, 0.09);
  border-radius: px2rem(6);
  margin-bottom: px2rem(16);
}
.workbench_home_page {
  .account_msg_box {
    @extend .mod;
    padding: px2rem(24) px2rem(30);
    display: flex;
    align-items: center;
    .img {
      display: block;
      width: px2rem(140);
      height: px2rem(140);
      border-radius: 50%;
      margin-right: px2rem(30);
    }
    .msg_box {
      .date {
        color: #555;
        font-size: px2rem(18);
        margin-bottom: px2rem(24);
      }
      .name_line {
        color: #333;
        font-size: px2rem(24);
        margin-bottom: px2rem(27);
        .name {
          color: $theme;
        }
      }
      .tags {
        color: #555;
        font-size: px2rem(18);
        display: flex;
        align-items: center;
        .tag {
          color: #fff;
          font-size: px2rem(14);
          padding: 0 px2rem(8);
          height: px2rem(20);
          line-height: px2rem(20);
          border-radius: px2rem(4);
          margin-right: px2rem(12);
          &.blue {
            background-color: #4A92FF;
          }
          &.yellow {
            background-color: #F29C1C;
          }
          &.green {
            background-color: #67C23A;;
          }
        }
      }
    }
  }
  .project_list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: px2rem(16);
    .project_item {
      flex: 1 1 auto;
      background-color: #fff;
      box-shadow: 0 px2rem(2) px2rem(6) 0 rgba(1, 24, 70, 0.10);
      border-radius: px2rem(12);
      padding: px2rem(20) px2rem(24);
      display: flex;
      align-items: center;
      margin-right: px2rem(16);
      cursor: pointer;
      &:last-child {
        margin-right: 0;
      }
      .img {
        display: block;
        width : px2rem(120);
        height: px2rem(120);
        margin-right: px2rem(24);
        &:last-child {
          margin-right: 0;
        }
      }
      .name_box {
        .name {
          color: #333;
          font-size: px2rem(30);
          font-weight: 500;
        }
        .sub_name {
          color: #999;
          font-size: px2rem(18);
          margin-top: px2rem(16)
        }
      }
    }
  }
  .mod_table {
    @extend .mod;
    padding: px2rem(20) px2rem(16) px2rem(24);
    &:last-child {
      margin-bottom: 0;
    }
    .title {
      color: #333;
      font-size: px2rem(16);
      font-weight: 600;
      display: flex;
      align-items: center;
      margin-bottom: px2rem(20);
      .icon {
        width: px2rem(3);
        height: px2rem(16);
        border-radius: px2rem(1);
        background-color: $theme;
        margin-right: px2rem(5);
      }
    }
  }
}
</style>
